<template>
  <div class="order-detail">
    <el-card v-loading="loading">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <h2>订单详情</h2>
            <el-tag :type="getStatusType(orderData.status)" class="status-tag">{{
              orderData.status
            }}</el-tag>
          </div>
          <div class="header-right">
            <el-button @click="goBack">返回</el-button>
            <el-button type="primary" @click="editOrder">编辑</el-button>
          </div>
        </div>
      </template>

      <el-descriptions title="客户信息" :column="2" border>
        <el-descriptions-item label="客户名称">{{ orderData.customer?.name }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          orderData.customer?.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ orderData.customer?.email }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ orderData.customer?.address }}</el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <el-descriptions title="订单信息" :column="3" border>
        <el-descriptions-item label="订单号">{{ orderData.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ orderData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ orderData.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{ orderData.amount }}</el-descriptions-item>
        <el-descriptions-item label="折扣">{{ orderData.discount }}</el-descriptions-item>
        <el-descriptions-item label="税费">{{ orderData.tax }}</el-descriptions-item>
        <el-descriptions-item label="总计" :span="3">
          <span class="total-amount">{{ orderData.total }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <div class="product-list">
        <h3>产品列表</h3>
        <el-table :data="orderData.products || []" border style="width: 100%">
          <el-table-column prop="name" label="产品名称" min-width="180" />
          <el-table-column prop="price" label="单价" width="120">
            <template #default="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="120" />
          <el-table-column label="小计" width="120">
            <template #default="scope">
              {{ (scope.row.price * scope.row.quantity).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-divider />

      <div class="order-logs">
        <h3>操作日志</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(log, index) in orderData.logs"
            :key="index"
            :timestamp="log.time"
            :type="getLogType(log.action)"
          >
            <h4>{{ getLogTitle(log.action) }}</h4>
            <p>操作人：{{ log.operator }}</p>
            <p>备注：{{ log.remark }}</p>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { orderApi } from '@/api';

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const orderData = reactive<any>({
  customer: {},
  products: [],
  logs: []
});

// 获取订单ID
const orderId = computed(() => route.params.id as string);

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case 'completed':
      return 'success';
    case 'processing':
      return 'warning';
    case 'pending':
      return 'info';
    case 'cancelled':
      return 'danger';
    default:
      return 'info';
  }
};

// 获取日志类型
const getLogType = (action: string) => {
  switch (action) {
    case 'create':
      return 'primary';
    case 'update':
      return 'warning';
    case 'pay':
      return 'success';
    case 'ship':
      return 'success';
    case 'deliver':
      return 'success';
    case 'complete':
      return 'success';
    case 'cancel':
      return 'danger';
    default:
      return 'info';
  }
};

// 获取日志标题
const getLogTitle = (action: string) => {
  switch (action) {
    case 'create':
      return '创建订单';
    case 'update':
      return '更新订单';
    case 'pay':
      return '支付订单';
    case 'ship':
      return '发货';
    case 'deliver':
      return '送达';
    case 'complete':
      return '完成订单';
    case 'cancel':
      return '取消订单';
    default:
      return '未知操作';
  }
};

// 获取订单详情
const fetchOrderDetail = async () => {
  loading.value = true;
  try {
    const res = await orderApi.getOrderDetail(orderId.value);
    Object.assign(orderData, res.data);
  } catch (error) {
    console.error('获取订单详情失败', error);
    ElMessage.error('获取订单详情失败');
  } finally {
    loading.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 编辑订单
const editOrder = () => {
  router.push(`/order/edit/${orderId.value}`);
};

// 页面加载时获取订单详情
onMounted(() => {
  fetchOrderDetail();
});
</script>

<style lang="scss" scoped>
.order-detail {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left {
      display: flex;
      align-items: center;

      h2 {
        margin: 0;
        font-size: 20px;
        color: var(--theme-text-color);
        margin-right: 10px;
      }

      .status-tag {
        margin-left: 10px;
      }
    }

    .header-right {
      display: flex;
      gap: 10px;
    }
  }

  .el-descriptions {
    margin-bottom: 20px;
  }

  .total-amount {
    font-size: 18px;
    font-weight: bold;
    color: var(--theme-color-primary);
  }

  .product-list,
  .order-logs {
    margin-top: 20px;

    h3 {
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 18px;
      color: var(--theme-text-color);
    }
  }
}
</style>
